import React from "react";
import { useBreadcrumbsContext, BreadcrumbsContext } from "../contexts/BreadcrumbsContext";

// import { connect } from "react-redux";
// import actions from "../stores/breadcrumbsActions";
import { Link } from "react-router-dom";
import Typography from "@material-ui/core/Typography";
import Bread from "@material-ui/core/Breadcrumbs";

// import store from "../stores/store"

// window.store = store

// function mapState(state) {
// 	console.log("mapState:", state);
// 	return { ...state };
// }

// class Breadcrumbs extends React.Component {
// 	constructor(props) {
// 		super();
// 		this.props = props;
// 		this.state = {breadcrumbs:[]}
// 		console.log("props:", props);
// 		store.subscribe((a)=>{
// 			console.log("receive:" ,this.state,this.props.breadcrumbs)
// 			// this.state = {breadcrumbs:this.props.breadcrumbs}
// 			this.setState({breadcrumbs:this.props.breadcrumbs})
// 		})
// 	}
// 	// componentDidMount() {
// 	// 	this.setState(this.state)
// 	// }
// 	render() {
// 		if(this.state.breadcrumbs.length ==0 ){
// 			return <></>
// 		}
// 		return (
// 			<Bread aria-label="breadcrumb">
// 				{this.state.breadcrumbs.map((v)=>{
// 					if(v.to) {
// 						return <Link color="inherit" to={v.to} key={v.to}>{v.title}</Link>
// 					}else {
// 						return <Typography color="textPrimary" key="no">{v.title}</Typography>
// 					}

// 				})}
// 			</Bread>
// 		);
// 	}
// }

// export default connect(mapState, actions)(Breadcrumbs);

function BreadcrumbsProvider(props) {
	const [breadcrumbs, setBreadcrumbs] = React.useState([]);
	return <BreadcrumbsContext.Provider value={{ breadcrumbs, setBreadcrumbs }}>{props.children}</BreadcrumbsContext.Provider>;
}

function Breadcrumbs(props) {
	const { breadcrumbs, setBreadcrumbs } = useBreadcrumbsContext();
	return (
		<Bread aria-label="breadcrumb">
			{breadcrumbs.map((v) => {
				if (v.to) {
					return (
						<Link color="inherit" to={v.to} key={v.to}>
							{v.title}
						</Link>
					);
				} else {
					return (
						<Typography color="textPrimary" key="no">
							{v.title}
						</Typography>
					);
				}
			})}
		</Bread>
	);
}

export { BreadcrumbsProvider, Breadcrumbs };
